<template>
  <el-dialog
    :visible.sync="QRCode.dialogVisible"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="clearQRCode"
  >
    <div class="price">
      <div>
        <img src="../../../../images/wxLogo.png" alt="" />
        <p>
          绑定微信
        </p>
      </div>
    </div>
    <div class="Qr-code">
      <el-skeleton
        style="width: 200px;"
        :loading="QRCode.Imageloading"
        animated
      >
        <template slot="template">
          <el-skeleton-item
            variant="image"
            style="width: 200px; height: 200px;"
          />
        </template>
        <template>
          <img :src="QRCode.url" class="image" />
        </template>
      </el-skeleton>
    </div>
    <div class="prompt">
      <span>请使用微信扫描二维码完成绑定</span>
    </div>
  </el-dialog>
</template>

<script>
import {
  createWxBindQrCode,
  checkAccountBindState,
  bindAccount,
} from 'src/api/user'
export default {
  data() {
    return {
      id: '',
      // 二维码
      QRCode: {
        dialogVisible: false,
        url: '',
        Imageloading: true,
        ticket: '',
      },
      // 绑定定时器
      queryInterval: null,
    }
  },
  methods: {
    show(id, response) {
      this.QRCode.dialogVisible = true
      if (id) {
        this.id = id
      }
      this.getQrcode(response)
    },
    clearQRCode() {
      clearInterval(this.queryInterval)
      this.QRCode.Imageloading = true
      this.QRCode.url = ''
      this.QRCode.dialogVisible = false
      this.msg = ''
    },
    // 获取二维码
    getQrcode(response) {
      if (response.code == 20000) {
        this.QRCode.url = response.data.qrCodeUrl
        this.QRCode.Imageloading = false
        this.QRCode.ticket = response.data.ticket
        this.queryInterval = setInterval(this.checkAccountBindState, 5000)
        if (response.data.msg) {
          this.dialogVisible = true
          this.msg = response.data.msg
        }
      }
    },
    // 查询扫码状态
    checkAccountBindState() {
      checkAccountBindState({ ticket: this.QRCode.ticket }).then((response) => {
        if (response.data.state == 1) {
          clearInterval(this.queryInterval)
          this.queryInterval = null
          this.QRCode.dialogVisible = false
          this.bindAccount(response.data.wxUserId, response.data.openId)
        }
        if (response.data.state == 2) {
          clearInterval(this.queryInterval)
          this.queryInterval = null
          this.getQrcode()
        }
      })
    },
    // 绑定微信
    bindAccount(wxUserId, openId) {
      bindAccount({
        wxUserId,
        openId,
        sysUserId: this.id,
      }).then((response) => {
        if (response.code == 20000) {
          this.$message.success({
            message: '微信绑定成功',
            duration: 2000,
            center: true,
          })
        }
      })
    },
    showRebind(msg, id) {
      this.rebind = true
      this.msg = msg
      this.id = id
    },
    cancel() {
      this.QRCode.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.el-dialog {
  .price {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: -50px 0 0 0;
    div {
      font-size: 18px;
      color: #07c160;
      display: flex;
      align-items: center;
      margin: 0 auto;
    }
  }
  .Qr-code {
    width: 215px;
    height: 215px;
    margin: 0 auto;
    border: 3px solid #07c160;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .prompt {
    margin-top: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    div {
      font-size: 18px;
      color: #07c160;
      display: flex;
      align-items: center;
      margin: 0 auto;
      p {
        margin: 20px 0;
      }
    }
    span {
      font-weight: 600;
    }
  }
}
</style>
